<template>
  <div v-if="sale.status == -2"  class="mw-column-center-style" style="width:1.17rem;height:1.17rem;margin:0.15rem 0.15rem 0 0.15rem;;justify-content: center;background-color: #F5F5F5">
    <img src="/static/has_deleted.png" style="width: 0.44rem;height:0.54rem;object-fit: cover"/>
    <div class="mw-third-text-color" style="font-size: 0.13rem;margin-top:0.15rem;">作者已删除</div>
  </div>
  <div v-else class="mw-row-spacebetween-style" style="padding: 0.15rem 0.15rem 0 0.15rem;">
    <div style="position: relative;height:1.17rem;width:1.17rem">
      <img style="border-radius: 0.04rem;object-fit:cover;height:100%;width:100%" :src="sale.image"></img>
      <div v-if="sale.hasOwnProperty('user')"
           style="position:absolute;left:0;top:0;width:1.17rem;height:0.2rem;background:linear-gradient(90deg,rgba(0,0,0,0.68) 0%,rgba(0,0,0,0) 100%);border-radius:0.04rem 0.04rem 0 0;">

      </div>
      <div v-if="sale.hasOwnProperty('user')" class="mw-row-style" style="align-items: center;position:absolute;top:0.02rem;left:0.04rem">
        <img class="mw-avatar-style" style="height:0.16rem;width:0.16rem;border-radius: 50%;"  :src="sale.user.avatar == ''? '/static/defalut_avatar.png':sale.user.avatar"></img>
        <div class="mw-single-line" style="margin-left:0.04rem;font-size: 0.1rem;width:0.9rem;color:#ffffff;">{{sale.user.name}}</div>
      </div>
      <div v-if="sale.status == 0"
         class="mw-main-white"  style="position:absolute;left:0;bottom:0;width:1.17rem;height:0.2rem;line-height:0.2rem;text-align:center;font-size:0.11rem;background-color: #5789c2;border-radius:0 0 0.04rem 0.04rem;">
        {{sale.status_name}}
      </div>
    </div>
    <div class="mw-column-style" style="height:1.17rem;width:2.13rem;justify-content: space-between">
      <div class="mw-first-text-color mw-n-line" style="font-size:0.15rem;line-height:0.21rem;">{{sale.title}}</div>
      <div class="mw-row-spacebetween-style" style=";width:100%;align-items: center;height:0.34rem;font-size: 0.11rem;">
        <div class="mw-column-style" style="height:100%;justify-content: space-around">
          <div class="mw-row-style" style="align-items: center">
            <div class="mw-row-style mw-main-red" style="font-weight: bold;align-items: baseline">
              <div style="font-size: 0.1rem">￥</div>
              <div style="font-size: 0.18rem">{{sale.price}}</div>
            </div>
            <div v-if="sale.coupon_amount != 0" class="mw-column-center-style" style="margin-left:0.04rem;justify-content:center;font-size:0.1rem;color:#ffffff;padding:0 0.1rem;height:0.14rem;background-image: url(/static/coupon_icon.png);background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;}
">{{sale.coupon_amount}}元券
            </div>
          </div>

          <div class="mw-row-style mw-third-text-color" style="font-size: 0.11rem">
            <div style="margin-right:0.04rem">{{sale.platform}}</div>
            <div style="text-decoration:line-through">￥{{sale.original_price}}</div>
          </div>
        </div>
        <div @click.stop="sendClickBuy(sale)" class="mw-active-rectangle-button">
          去抢购
        </div>
      </div>
    </div>
  </div>

</template>
<script>
  import utils from '../utils'
  import httputil from '../httputil'
  export default {
    props: ['sale'],
    data() {
      return {

      }
    },
    computed: {},
    methods: {
      sendClickBuy(item){
        var that = this
        item.click_total = item.click_total + 1
        httputil.request("discount/click", {discount_id:item.id}, function (successresult) {
          that.$emit('receiveClickBuy',item)
        }, function (errorresult) {
          that.$emit('receiveClickBuy',item)
        }, "POST", true,"")
      }
    }
  }

</script>
<style scoped>

</style>
